<template>
  <div class="mineaddress">
    
    <!-- 顶部导航 -->
    <van-nav-bar
        title="我的收货地址"
        left-text="返回"
        right-text="新增地址"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />

    <div class="content" v-for="(item,index) in addresslist" :key="index">
        <div class="left">
            <div class="floor">
                {{item.address}}
            </div>
            <div class="contact">
                <div class="name">{{item.name}}<span>(先生)</span></div>
                <div class="phone">
                  {{item.phone}}
                </div>
            </div>
        </div>
        <div class="right" @click="handelclick(item)">
            <van-icon name="edit" />
        </div>
    </div>
  </div>
</template>

<script>

import { mapState,mapMutations,mapActions } from 'vuex'

export default {
data(){
  return{
    // mineaddress:[],
  }
},
computed:{
    ...mapState(['addresslist']),
  },
methods:{
  onClickRight(){
    this.$router.push('/addaddress');
  },
  handelclick(item){
    this.$router.push({
      name:'/shippingaddress',
      query: {list:JSON.stringify({id:item.id,address:item.address,name:item.name,phone:item.phone})}, 
  });
  }
},
}
</script>

<style lang="scss" scoped>
*{
    padding: 0 10px ;
}
.content{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        .floor{
            font-size: 18px;
            line-height: 1;
            margin: 10px 10px;
            font-weight: 600;
        }
        .contact{
            font-size: 15px;
            line-height: 1;
            display: flex;
            // justify-content: space-between;
            .name{
                text-align: left;
            }
        }
    }
}
</style>